<!DOCTYPE html>
<html>
<div th:replace="common/jsCssRef :: jsfJsCssRef"></div>
<body class="bgf6">

	<div th:replace="common/head :: jsfHeader"></div>
	
	<div class="main-body pb100">
		<div class="container pt10">
			<div class="dflx sbt">
				<div th:replace="common/left :: jsfLeft"></div>
				
				<div class="body-right" id="app">
					<div class="bread-nav bgff">
						<ul class="dflx">
						</ul>
					</div>
					
					<div class="bgff mt10 pb20 edit-mode">
						<div class="wrap">
							
                            <div class="box">
                            	<div class="box-title"><span th:text="${nav.navname}"></span></div>
                            	<div class="mt20 f14">
                            		<div class="two">
                            			<span class="title">二级导航名称</span>
	                					<div class="content">
	                						<input type="text" id="navName" class="form-control" placeholder="请输入二级导航名称"/>
	                					</div>
	                        			<span class="title">价格</span>
	                					<div class="content">
	                						<input type="text" id="price" class="form-control" placeholder="请输入价格"/>
                						</div>
                            		</div>

                            	</div>
                            </div>
                            
                            <div class="tc mt40">
								<button type="button" class="btn btn-white f12" onclick="backPre()"> 返回 </button>
								<button type="button" class="btn btn-white f12" onclick="savePlan()"> 保存 </button>
                            </div>
							
						</div>

						<!--表格部分-->
						<table class="table th52 f14 table-bordered mt20 table-hover" id="cityPlanTable">
							<template>
								<el-table
										ref="multipleTable"
										:data="plans"
										tooltip-effect="dark"
										style="width: 100%"
										@selection-change="handleSelectionChange">


									<el-table-column
											label="ID"
											width="50">
										<template slot-scope="scope">{{ scope.row.id }}</template>
									</el-table-column>
									<el-table-column
											prop="navname"
											label="导航名称"
											width="150">
									</el-table-column>

									<el-table-column label="操作" width="160">
										<template slot-scope="scope">
											<el-button
													type="success"
													v-if="scope.row.status == 2"
													size="mini"
													@click="handleYunying(scope.$index, scope.row)">启用</el-button>

											<el-button
													type="danger"
													v-if="scope.row.status == 1"
													size="mini"
													@click="handleJinyong(scope.$index, scope.row)">禁用</el-button>

										</template>
									</el-table-column>
								</el-table>
							</template>

						</table>


					</div>




				</div>
			</div>
		</div>
	</div>
	

<script type="text/javascript">

    $(document).ready(function () {
        $('#areaLi').addClass('active');
    });

    var id = '[[${id}]]';

    var appPage = new Vue({
        el : '#app',
        data : {
            area : {},
            plans:[]
        },
        created : function() {
            this.loadPlanList();
        },
        methods : {
            loadPlanList : function () {
                let that = this;
                $.ajax({
                    'url' : '/user/querySecondeNav',
                    'dataType' : 'json',
                    'type' : 'get',
                    'data' : {
                        'parentId' : [[${nav.id}]]
                    },
                    'success' : function (result) {
                        if (result.code != 1000) {
                            alert(result.message);
                            return;
                        }

                        appPage.plans = result.data;
                    },
                    'error' : function (result) {
                    }
                });
            },

            handleYunying: function(index, row) {
                this.$confirm('确定运营'+row.areaName+'?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    jinyong(row.id, 1);

            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

            },

            handleJinyong : function (index, row) {
                this.$confirm('确定禁用'+row.navname+'?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    jinyong(row.id, 2);

            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
            }
        }
    })


    function jinyong(id, status) {
        $.ajax({
            'url' :'/user/modiyNav',
            'dataType' : 'json',
            'type' : 'post',
            'data' : {
                'navId' : id,
                'status' : status
            },
            'success' : function (result) {
                if (result.code != 1000) {
                    alert(result.message);
                    return;
                }

                appPage.loadPlanList();
            },
            'error' : function (result) {
            }
        });

    }
	
	function backPre() {
        window.location.href = '/view/area';
    }
	

	function savePlan() {
	    var params = {
	        'navName' : $('#navName').val(),
	        'price' : $('#price').val(),
			'parentId' : [[${nav.id}]],
			'level' : 2
		}

		if ($('#navName').val() == '') {
			alert('请输入二级导航名称');
			return;
		}

        $.ajax({
            'url' : '/user/addNav',
            'dataType' : 'json',
            'type' : 'post',
            'data' : params,
            'success' : function (result) {
                if (result.code != 1000) {
                    alert(result.msg);
                    if (result.code == 5555) {
                        window.location.href = '/';
                    }
                    return;
                }

                appPage.$message({
                    type: 'info',
                    message: '保存成功'
                });

                $('#navName').val('');
                $('#price').val('');
                appPage.loadPlanList();
            },
            'error' : function (result) {
            }
        });

		
    }

</script>
</body>
</html>
